import React, { useRef, useEffect } from 'react';
import * as echarts from 'echarts/core';
import { LineChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, TitleComponent, LegendComponent } from 'echarts/components';
import { SVGRenderer, SvgChart } from '@wuba/react-native-echarts';
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window')

echarts.use([SVGRenderer, GridComponent, TooltipComponent, TitleComponent, LineChart, LegendComponent]);

export default function Line(props) {
    const skiaRef = useRef(null);
    function formatNumber(num) {
        // 如果数值大于等于10000，除以10000，保留一位小数，加上w后缀
        if (num >= 10000) {
            return (num / 10000).toFixed(1) + 'w';
        }
        // 如果数值大于等于1000，除以1000，保留一位小数，加上k后缀
        else if (num >= 1000) {
            return (num / 1000).toFixed(1) + 'k';
        }
        // 否则，直接返回数值
        else {
            return num;
        }
    }
    function formatDate(dateString) {
        if (!/^\d{2}\/\d{2}\/\d{4}$/.test(dateString)) {
            return '';
        }
        const [day, month, year] = dateString.split('/');
        return `${year}/${month}/${day}`;
    }
    useEffect(() => {
        const option = {
            title: {
                text: props.title || '',
                textStyle: {
                    fontSize: 15
                },
                show: false
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line',
                    label: {
                        formatter: function (params) {
                            console.log('value', params.value)
                            // 假设此轴的 type 为 'time'。
                            return formatDate(params.value);
                        }
                    }
                },
            },
            grid: {
                // left: '3%',
                // right: '4%',
                // bottom: '3%',
                // containLabel: true
                right: 0,
                // top: 35
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: props.labels,
                    axisLabel: {
                        formatter: function (value, index) {
                            return formatDate(value);
                        }
                    },
                    "axisLine": {
                        "show": false  //隐藏x轴线
                    },
                    "axisTick": {
                        "show": false //隐藏x轴刻度
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: function (value, index) {
                            return formatNumber(value);
                        }
                    },
                    name: '单位（元）'
                }
            ],
            series: [
                {
                    // name: 'Email',
                    type: 'line',
                    // stack: 'Total',
                    // areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    showSymbol: false,
                    data: props.series,
                    itemStyle: {
                        color: '#8177e5'
                    },
                    // areaStyle: {
                    //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    //         {
                    //             offset: 0,
                    //             color: '#8177e5'
                    //         },
                    //         {
                    //             offset: 1,
                    //             color: '#ada6f6'
                    //         }
                    //     ])
                    // },
                }
            ]
        };
        let chart;
        if (skiaRef.current) {
            chart = echarts.init(skiaRef.current, 'light', {
                renderer: 'svg',
                width: width - 34,
                height: (width - 34) * 0.8,
            });
            chart.setOption(option);
        }
        return () => chart?.dispose();
    }, []);

    // return <SkiaChart ref={skiaRef} />;
    return <SvgChart ref={skiaRef} />;
}